;(function (window) {
  'use strict'

  Vue.config.productionTip = false // 关闭生产提示
  // 所有的页面js效果在此实现
  const vm = new Vue({
    el: '#todoapp',
    data: {
      // todoList: [
      //   { id: 1, todoName: '游泳', done: false },
      //   { id: 2, todoName: '滑雪', done: true },
      //   { id: 3, todoName: '逛街', done: true }
      // ],
      todoList: JSON.parse(localStorage.getItem('todoList')),
      todoName: '',
      editId: 0
    },
    methods: {
      // 1. 添加任务项
      add() {
        // if (this.todoName === '') {
        //   alert('添加的任务项不能为空...')
        //   return
        // }
        // if (!this.todoName) {
        //   return  alert('添加的任务项不能为空...')
        // }

        if (!this.todoName) return alert('添加的任务项不能为空...')

        this.todoList.unshift({
          id: Date.now(),
          todoName: this.todoName,
          done: false // 默认未完成 ，是false
        })
        // 清空输入框
        this.todoName = ''
      },
      // 2. 删除任务项
      del(id) {
        // 2.1 可以用过滤的方式来实现
        // this.todoList = this.todoList.filter(item => {
        //   return item.id != id
        // })
        // this.todoList = this.todoList.filter(item =>item.id != id)

        // 2.2 可以用splice 来实现
        // let index = this.todoList.findIndex(item => item.id == id)
        // this.todoList.splice(index, 1)

        this.todoList.splice(
          this.todoList.findIndex(item => item.id == id),
          1
        )
      },
      // 3. 编辑任务 让当前项变成可编辑的状态
      edit(id) {
        this.editId = id
      },
      // 4. 更新任务项
      // 也就是说在真正的修改了任务项之后，要让当前的任务项状态变成普通状态，也就是将之前编辑时的editing类给删除掉，即：让后面的等式不成立
      update() {
        this.editId = 0
      },
      // 5. 清除所有已完成项
      clear() {
        this.todoList = this.todoList.filter(item => !item.done)
      }
    },
    computed: {
      // 1. 统计剩余未完成任务数量
      leftCount() {
        // 根据data中的某些数据项计算而来
        return this.todoList.filter(item => !item.done).length
      },
      // 2. 是否显示清除已经完成项按钮
      isShowClearCompleted() {
        return this.todoList.some(item => item.done)

        // 强调每一项都满足条件，最终者会返回true
        // return this.todoList.every(item => !item.done)
      },
      // 3. checkAll 总按钮控制小按钮 是互相控制
      // checkAll() {
      // //  return this.todoList.every(item => item.done)
      // }
      checkAll: {
        get() {
          return this.todoList.every(item => item.done)
        },
        set(val) {
          // console.log('vale',val)
          this.todoList.forEach(item => (item.done = val))
        }
      }
    },
    watch: {
      todoList: {
        deep:true, // 开启深度侦听
        handler(newValue) {
          localStorage.setItem('todoList',JSON.stringify(newValue))
        }
      }
    }
  })

  // Vue是响应式的框架，当数据发生了变化，视图内容也会发生变化
  // 使用Vue框架更加的是专注于业务，专注于数据，而不是去操作DOM
})(window)
